<template>
	<view class="mainbgc ">
		<view class="ffffff radius padding">
			<view class="text_x color_ling ">规格类型</view>
			<view class="flexleft margin_top">
				<view
					:class="formdata.spec_type==0?'focusbgc itemlable margin_right3':'nofocusbgc itemlable margin_right3'"
					@click="changelable(0)">单规格</view>
				<view :class="formdata.spec_type==1?'focusbgc itemlable':'nofocusbgc itemlable'"
					@click="changelable(1)">多规格</view>
			</view>
		</view>
		<!-- 单规格 -->
		<view class="" v-show="formdata.spec_type==0">
			<view class="padding">
				<view class="padding ffffff radius flexbetween">
					<view class="text_x color_ling white_nowrap">原价</view>
					<view class="flexright">
						<input type="text" placeholder="请输入商品原价"
							placeholder-style="font-size: 28rpx;font-weight: 500;color: #999999;"
							class="textright margin_right text_a" v-model="alone_price">
					</view>
				</view>
				<view class="padding ffffff radius flexbetween">
					<view class="text_x color_ling white_nowrap">拼团价</view>
					<view class="flexright">
						<input type="text" placeholder="请输入拼团价"
							placeholder-style="font-size: 28rpx;font-weight: 500;color: #999999;"
							class="textright margin_right text_a" v-model="price">
					</view>
				</view>
				<view class="padding ffffff radius flexbetween">
					<view class="text_x color_ling white_nowrap">拼团人数</view>
					<view class="flexright">
						<input type="text" placeholder="请输入拼团人数"
							placeholder-style="font-size: 28rpx;font-weight: 500;color: #999999;"
							class="textright margin_right text_a" v-model="buying_count_num">
					</view>
				</view>
				<view class="padding ffffff radius flexbetween">
					<view class="text_x color_ling white_nowrap">库存</view>
					<view class="flexright">
						<input type="text" placeholder="请输入库存"
							placeholder-style="font-size: 28rpx;font-weight: 500;color: #999999;"
							class="textright margin_right text_a" v-model="stock_num">
					</view>
				</view>
				<view class="padding ffffff radius flexbetween">
					<view class="text_x color_ling white_nowrap">重量</view>
					<view class="flexright">
						<input type="text" placeholder="请输入重量"
							placeholder-style="font-size: 28rpx;font-weight: 500;color: #999999;"
							class="textright margin_right text_a" v-model="weight">
					</view>
				</view>
				<view class="padding ffffff radius flexbetween">
					<view class="text_x color_ling white_nowrap">体积</view>
					<view class="flexright">
						<input type="text" placeholder="请输入体积"
							placeholder-style="font-size: 28rpx;font-weight: 500;color: #999999;"
							class="textright margin_right text_a" v-model="bulk">
					</view>
				</view>
			</view>
			<!-- 底部 -->
			<view class="footer ffffff padding">
				<view class="footerButton" @click="submitsingle">保存</view>
			</view>
		</view>
		<!-- 多规格 -->
		<view class="" v-show="formdata.spec_type==1">
			<view class="section padding">
				<view class="ffffff line">
					<view class="text_x">新增规格属性</view>
					<view class="flexleft margin_top">
						<view class="inputName">
							<input type="text" placeholder="请输入规格属性" class="text_a" v-model="guigename">
						</view>
						<view class="add" @click="addguige">添加</view>
					</view>
				</view>
				<!-- 颜色 -->
				<view class="" v-for="(item,index) in formdata.spu" :key="index">
					<view class="flexbetween  padding_top">
						<view class="text_weight color">{{item.spu}}</view>
						<view class="del" @click="delspu(index)">删除</view>
					</view>
					<view class="flexleft margin_top">
						<view class="inputName">
							<input type="text" placeholder="请输入规格值" class="text_a" v-model="item.value">
						</view>
						<view class="add" @click="addlable(index)">添加</view>
					</view>
					<view class="flexleft  flex_wrap">
						<view class="blue_color dd margin_top text_a" v-for="(ite,inde) in item.spuitem_arr"
							:key="inde">
							<view class="">{{ite}}</view>
							<view class="delete" @click="delspuItem(index,inde)">x</view>
						</view>
					</view>
				</view>
				<!--颜色：黑色 尺寸-->
				<view class="padding fa margin_top" v-if="formdata.sku.length">
					<view class=" margin_top" v-for="(item,index) in formdata.sku" :key="index+'zdy'">
						<view class="yanse text_a" style="display: inline-block;margin-right: 30rpx;"
							v-for="(v,x) in item.detail_json" :key="x+'v'">{{x}}:{{v}}</view>
						<view class="flexleft">
							<view class="input flexleft margin_right2">
								<view class="word_grey yj">原价：</view>
								<input type="text" placeholder="请输入" class="word_grey yanse" v-model="item.alone_price">
							</view>
							<view class="input flexleft">
								<view class="word_grey yj">拼团价：</view>
								<input type="text" placeholder="请输入" class="word_grey yanse" v-model="item.price">
							</view>
						</view>
						<view class="flexleft">
							<view class="input flexleft margin_right2">
								<view class="word_grey yj">拼团人数：</view>
								<input type="text" placeholder="请输入" class="word_grey yanse"
									v-model="item.buying_count_num">
							</view>
							<view class="input flexleft">
								<view class="word_grey yj">库存：</view>
								<input type="text" placeholder="请输入" class="word_grey yanse" v-model="item.stock_num">
							</view>
						</view>
						<view class="flexleft">
							<view class="input flexleft margin_right2">
								<view class="word_grey yj">重量：</view>
								<input type="text" placeholder="请输入" class="word_grey yanse" v-model="item.weight">
							</view>
							<view class="input flexleft">
								<view class="word_grey yj">体积：</view>
								<input type="text" placeholder="请输入" class="word_grey yanse" v-model="item.bulk">
							</view>
						</view>
						<view class="item_image margin_top radius" @click="uploadImg(index)">
							<image :src="item.image_text?item.image_text:'/static/image/home/noimage.png'" mode="">
							</image>
						</view>
					</view>
				</view>
				<view class="footer ffffff padding">
					<view class="footerButton" @click="sbumitmulti">保存</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import upFile from "@/utils/upload.js"
	export default {
		data() {
			return {
				formdata: {
					spec_type: 0, //0单规格，1多规格
					spu: [],
					sku: [], //多规格默认数据
				},
				// spec_type: 0, //0单规格，1多规格
				// 多规格开始
				guigename: "", //规格名称
				// spu: [],
				// spuItem: [],
				// sku: [],
				// zdylist: [], //自定义数组
				// // 多规格结束
				// // 单规格
				price: "", //拼团价
				alone_price: "", //原价
				stock_num: "", //库存
				weight: "", //重量
				bulk: "", //体积
				buying_count_num: "", //拼团人数
			}
		},
		onLoad(options) {
			if (options.msg) {
				let data = JSON.parse(decodeURIComponent(options.msg));
				this.formdata.spec_type = data.spec_type
				if (data.spec_type == 0) {
					this.price = data.sku[0].price
					this.alone_price = data.sku[0].alone_price
					this.stock_num = data.sku[0].stock_num
					this.weight = data.sku[0].weight
					this.bulk = data.sku[0].bulk
					this.buying_count_num = data.sku[0].buying_count_num
					this.formdata.sku = []
					this.formdata.spu = [];
				} else {
					this.formdata.sku = data.sku
					for (var i = 0; i < data.spu.length; i++) {
						data.spu[i]['value'] = ''; //添加那里的额外参数
						data.spu[i]['spuitem_arr'] = data.spu[i]['spuitem'].split(',');
					}
					this.formdata.spu = data.spu
				}
			}
		},
		methods: {
			isShow(item) {
				if (item.image_text) {
					return true
				} else {
					return false
				}
			},
			uploadImg(value) {
				var that = this;
				upFile.chooseImage({
					count: 1
				}, function(res) {
					that.formdata.sku[value].image = res.url
					that.formdata.sku[value].image_text = res.fullurl
				})
			},
			sbumitmulti() {// 多规格提交
				if (this.formdata.spu.length == 0) {
					httpRequest.toast("请输入规格属性")
					return false
				}
				let flag = false
				if (this.formdata.sku.length == 0) {
					httpRequest.toast("请输入规格值")
					return false
				}
				var sku = this.formdata.sku;
				sku.forEach(item => {
					if (item.price == "" || item.alone_price == "" || item.stock_num == "" || item.weight == "" ||
						item.bulk == "" || item.buying_count_num == "" || item.image == "") {
						flag = true
					}
				})
				let data = this.formdata
				if (flag) {
					httpRequest.toast("请将信息填写完整")
					return false
				}
				let priceFlag = false
				sku.forEach(item => {
					console.log(item)
					if (Number(item.alone_price) <= Number(item.price)) {
						priceFlag = true
					}
				})
				if (priceFlag) {
					httpRequest.toast("拼团价应该小于原价！")
					return false
				}
				uni.$emit("spggmulti", data)
				uni.navigateBack(1)
			},
			// 多规格开始
			// 添加规格属性
			addguige() {
				if (!this.guigename) {
					httpRequest.toast('请填写属性');
					return false;
				}
				this.formdata.spu.push({
					spu: this.guigename,
					spuitem: '',
					spuitem_arr: [],
				})
				this.guigename = '';
			},
			// 删除规格属性
			delspu(index) {
				this.formdata.spu.splice(index, 1)
				this.formdata.sku = []
			},
			// 规格值删除
			delspuItem(index, inde) {
				var spu = this.formdata.spu;
				if (spu[index].spuitem_arr.length == 1) {
					spu.splice(index, 1)
					this.formdata.sku = []
					this.formdata.spu = spu;
					// 组装sku
					this.skuCreate();
				} else {
					var spu_name = spu[index].spu;
					var spuitem_name = spu[index].spuitem_arr[inde];
					spu[index].spuitem_arr.splice(inde, 1)
					spu[index].spuitem = spu[index].spuitem_arr.join(',')
					this.formdata.spu = spu;
					// 组装sku
					this.skuCreate();
				}
			},
			// 规格值添加
			addlable(index) {
				let spu = this.formdata.spu;
				if (!spu[index]['value']) {
					httpRequest.toast('请填写规格值');
					return false;
				}
				var is_err = false;
				// 判断是否有重复规格值
				for (var i = 0; i < spu[index].spuitem_arr.length; i++) {
					if (spu[index].spuitem_arr[i] == spu[index]['value']) {
						is_err = true;
					}
				}
				if (is_err) {
					httpRequest.toast('存在重复的规格值');
					return false;
				}

				spu[index].spuitem_arr.push(spu[index]['value']);
				spu[index].spuitem = spu[index].spuitem_arr.join(',')
				spu[index]['value'] = ''
				this.formdata.spu = spu;

				// 组装sku
				this.skuCreate();
			},
			// 生成Sku
			skuCreate() {
				let spu = this.formdata.spu;
				let sku = this.formdata.sku;
				var spuItem = [];
				for (var i = 0; i < spu.length; i++) {
					spuItem.push(spu[i].spuitem_arr)
				}
				var temp_data = this.skuDesign(spuItem)
				var new_sku = [];

				for (var i = 0; i < temp_data.length; i++) {
					var detail_json = {};
					for (var j = 0; j < spu.length; j++) {
						detail_json[spu[j].spu] = temp_data[i][j];
					}
					var sku_name = temp_data[i].join(',');
					var hasdata = null;
					for (var k = 0; k < sku.length; k++) {
						if (sku[k].sku == sku_name) {
							hasdata = sku[k];
						}
					}
					new_sku.push({
						sku: sku_name,
						detail: JSON.stringify(detail_json),
						detail_json: detail_json,
						image: hasdata ? (hasdata.image) : '',
						image_text: hasdata ? (hasdata.image_text) : '',
						price: hasdata ? (hasdata.price) : '',
						alone_price: hasdata ? (hasdata.alone_price) : '',
						stock_num: hasdata ? (hasdata.stock_num) : '',
						weight: hasdata ? (hasdata.weight) : '',
						bulk: hasdata ? (hasdata.bulk) : '',
						buying_count_num: hasdata ? (hasdata.buying_count_num) : '',
					})
				}

				this.formdata.sku = new_sku
			},
			skuDesign: function(t) {
				if (0 == t.length) return [];
				//清除掉其中的空数据
				var tarr = [];
				t.forEach(function(tt, i) {
					if (tt.length > 0) {
						tarr.push(tt)
					}
				})
				if (0 == tarr.length) return [];
				if (tarr.length < 2) {
					var e = [];
					return tarr[0].forEach(function(tt) {
							e.push([tt])
						}),
						e
				}
				return [].reduce.call(tarr,
					function(tt, e) {
						var i = [];
						return tt.forEach(function(ttt) {
								//徐加判断
								if (e.length > 0) { //第二个有数据
									e.forEach(function(ee) {
										var a = [].concat(Array.isArray(ttt) ? ttt : [ttt]);
										a.push(ee),
											i.push(a)
									})
								} else { //下一个没数据
									var a = [].concat(Array.isArray(ttt) ? ttt : [ttt]);
									i.push(a)
								}
							}),
							i
					})
			},
			// 多规格结束
			submitsingle() { // 单规格
				if (this.alone_price == "") {
					httpRequest.toast("请输入商品原价")
					return false
				}
				if (this.price == "") {
					httpRequest.toast("请输入商品拼团价")
					return false
				}
				if (this.buying_count_num == "") {
					httpRequest.toast("请输入拼团人数")
					return false
				}
				if (this.stock_num == "") {
					httpRequest.toast("请输入商品库存")
					return false
				}
				if (this.weight == "") {
					httpRequest.toast("请输入重量")
					return false
				}
				if (this.bulk == "") {
					httpRequest.toast("请输入体积")
					return false
				}
				if (Number(this.alone_price) <= Number(this.price)) {
					httpRequest.toast("拼团价应该小于原价！")
					return false
				}
				let sku = [{
					sku: "",
					detail: '',
					image: "",
					alone_price: this.alone_price,//原价
					price: this.price,//拼团价
					buying_count_num: this.buying_count_num,
					stock_num: this.stock_num,
					weight: this.weight,
					bulk: this.bulk
				}]
				this.formdata.sku = sku;
				let data = this.formdata
				uni.$emit("spggmulti", data)
				uni.navigateBack(1)
			},
			changelable(value) {
				this.formdata.spec_type = value
			}
		}
	}
</script>

<style lang="scss" scoped>
	.inputPlace {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.bigbtn {
		margin-top: 200rpx;
	}

	.footer_di {
		width: 100%;
		padding: 30rpx 30rpx 30rpx 30rpx;
		position: fixed;
		bottom: 0rpx;
		box-sizing: border-box;
	}

	.quan {
		width: 20%;

	}

	.fa {
		background-color: #fafafa;
	}

	.delete {
		color: #fff;
		font-size: 16rpx;
		position: absolute;
		top: 0rpx;
		right: 0rpx;
		background-color: #F3271C;
		padding: 0rpx 15rpx;
		display: inline-block;
		border-top-right-radius: 8rpx;
		border-bottom-left-radius: 8rpx;
		text-align: center;

	}

	.dd {
		position: relative;
		// bottom: 0rpx;
		// left: 0rpx;
		// min-width: 10%;
		margin-right: 20rpx;
	}

	.blue_color {
		padding: 16rpx 30rpx;
		background-color: rgba(243, 39, 28, .1);
		color: rgba(243, 39, 28, 1);
		border-radius: 8px;
		text-align: center;
	}

	.inputName {
		width: 80%;
		border: 2rpx solid #F3271C;
		padding: 20rpx 30rpx;
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
	}

	.add {
		width: 20%;
		color: #fff;
		background-color: #F3271C;
		// padding: 29rpx 20rpx 32rpx 28rpx;
		padding: 34rpx 16rpx 18rpx 28rpx;
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.line {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid RGBA(247, 247, 247, 1);
	}

	.color {
		color: #F3271C;
		font-weight: 800;
		font-size: 28rpx;
	}

	.yanse {
		color: rgba(243, 39, 28, 1) !important;
	}

	/*  */
	.shanchu {
		margin-top: 30rpx;
	}

	.input {
		padding: 30rpx 30rpx;
		background-color: #fff;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		margin-top: 30rpx;
	}

	.yuanjia {
		width: 39%;
	}

	.yj {
		width: 190rpx;
		white-space: nowrap;
	}

	.word_grey {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.xian {
		border-bottom: 1rpx solid #ccc;
	}

	.blue {
		color: #F3271C;
	}

	.section_ming {
		padding: 30rpx 0rpx;
	}

	.section_header {
		padding: 30rpx 30rpx;
		background-color: #f7f7f7;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}

	.section {
		background-color: #fff;
		margin-top: 30rpx;
		padding: 30rpx 30rpx;
	}

	.jia {
		width: 28rpx;
		height: 28rpx;
		background-color: rgba(34, 141, 255, 1);
		border-radius: 50%;
		text-align: center;
		color: #ffff;
		line-height: 28rpx;
	}

	.form {
		text-align: center;
		padding-top: 54rpx;
		padding-bottom: 61rpx;
	}

	.pu {
		background: RGBA(247, 249, 250, 1);
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		padding: 20rpx 71rpx 21rpx 71rpx;
		margin: 0rpx 25rpx 30rpx 25rpx;
	}

	.footer {
		// padding: 84rpx 30rpx;
	}

	.nav {
		padding: 30rpx 10rpx;
	}

	.upbox {
		width: 180rpx;
		height: 180rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		background-color: RGBA(233, 244, 255, 1);
	}

	.lan {
		background: RGBA(233, 244, 255, 1);
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #F3271C;
		padding: 20rpx 71rpx 21rpx 71rpx;
		margin: 0rpx 25rpx 30rpx 25rpx;
	}

	.itemlable {
		padding: 15rpx 35rpx;
		border-radius: 10rpx;
	}

	.mainbgc {
		// overflow: hidden;
		padding-bottom: 100rpx;
	}

	.focusbgc {
		background-color: rgba(243, 39, 28, .1);
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #F3271C;
	}

	.nofocusbgc {
		background-color: #EFEFEF;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.item_image_box {
		width: 33.33%;
	}

	.item_image {
		position: relative;
		width: 180rpx;
		height: 180rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>